<template>
	<view class="recharge-layout">
		<my-header title="充值" background-color="transparent"></my-header>
		<view class="content">
			<image class="header-mask"></image>
			<my-content class="recharge-content" style="height: fit-content !important">
				<view class="header">
					<view class="header_title">金币余额</view>
					<view class="header_amount">{{ balance }}</view>
				</view>
			</my-content>

			<view class="recharge_box">
				<view class="recharge_header">
					<view class="recharge_header_title">金币充值</view>
					<view class="recharge_header_remark">充值的金币不可提现和退款</view>
				</view>
				<view class="recharge_panel" v-if="rechargeData.length > 0">
					<view @click="changePanel(item)" :class="recharge_id == item.id ? 'active' : ''"
						class="recharge_item" v-for="(item, index) in rechargeData" :key="item.id">
						<view class="recharge_item_top">
							<image mode="widthFix" class="recharge_icon"
								src="https://www.dingxians.cn/upload/images/shop/money.png"></image>
							<view class="recharge-num">{{ item.num }}</view>
						</view>
						<view class="recharge_item_bottom">
							<view class="recharge_symbol">￥</view>
							<view class="recharge_amount">{{ item.amount }}</view>
						</view>
					</view>
				</view>
				<view class="recharge-custom" :class="[recharge_id === 0 ? 'item-bg' : '']">
					<text>自定义金额:</text>
					<input @focus="customRechargeFocus" @input="customRechargeChange" type="number" pattern="[0-9]*"
						class="recharge-custom-num" placeholder="请输入你要充值的金额" v-model="amount" />
				</view>
			</view>

			<view class="recharge_type">
				<view style="color: white; margin-left: 30rpx">支付方式</view>
				<view class="recharge_type_item" @click="changeType(item.id)" v-for="item in pay_type_arr"
					:key="item.id">
					<view class="pay_left">
						<image mode="widthFix" class="pay_icon" :src="item.pay_icon"></image>
						<view>{{ item.name }}</view>
					</view>
					<image mode="widthFix" class="pay_selected" v-if="pay_type == item.id"
						src="https://www.dingxians.cn/upload/images/common/selected.png"></image>
					<image mode="widthFix" class="pay_selected" v-else
						src="https://www.dingxians.cn/upload/images/common/unselected.png"></image>
				</view>
			</view>

			<view class="bottom">
				<view class="bottom_header" @click="changeAgree()">
					<image mode="widthFix" class="bottom_selected" v-if="agreeStatus"
						src="https://www.dingxians.cn/upload/images/common/selected.png"></image>
					<image mode="widthFix" class="bottom_selected" v-else
						src="https://www.dingxians.cn/upload/images/common/unselected.png"></image>
					<view class="bottom_header_agree">
						<view>我已满18岁，已阅读并同意</view>
						<view class="user_agree" @click.stop="header(`/packageB/content/user`)">《用户协议》</view>
					</view>
				</view>
				<view class="bottom_pay_box">
					<view class="bottom_amount">
						<view class="bottom_amount_text">充值金额：</view>
						<view class="amount">￥{{ amount || 0 }}</view>
					</view>
					<view v-if="payStatus" class="pay_submit btn-primary ing">立即支付</view>
					<view v-else class="pay_submit btn-primary" @click="submit()">立即支付</view>
				</view>
			</view>
		</view>

		<my-alert-dialog ref="recharge_dialog" title="提示" :showConfirm="false" cancelString="关闭">
			<view class="dialog-content" style="text-align: center; margin: 20rpx 0;">
				<image style="width: 300rpx; margin: 0 auto;"
					src="https://www.dingxians.cn/upload/images/common/down_app.png" mode="aspectFit" />
				<view>请扫码下载App充值</view>
			</view>
		</my-alert-dialog>
	</view>
</template>

<script>
	import api from '../../api/index.js'
	export default {
		data() {
			return {
				balanceData: {
					balance: 0,
				},
				rechargeData: [],
				recharge_id: 1,
				pay_type_arr: [],
				pay_type: 1,
				agreeStatus: false,
				balance: 0,
				amount: 0,
				payStatus: true, // 支付中
				total_rech:'',
			}
		},
		onLoad(options) {
			// #ifdef MP-WEIXIN
			this.pay_type_arr.push({
				id: 1,
				name: '微信',
				pay_icon: 'https://www.dingxians.cn/upload/images/common/wechat.png'
			})
			// #endif
			// #ifdef APP-PLUS
			this.pay_type_arr.push({
				id: 2,
				name: '支付宝',
				pay_icon: 'https://www.dingxians.cn/upload/images/common/alipay.png'
			})
			// #endif
			this.getPanels()
			this.getUser()
			if (options.amount) {
				this.recharge_id = 0
				this.amount = options.amount
			}
		},
		onShow() {},
		methods: {
			customRechargeChange(e) {
				// console.log(e.target.value)
				/* if (e.detail.value === '') {
				  this.recharge_id = 1
				  this.amount = 8
				} else {
				  if (e.detail.value <= 0) {
				    return
				  }
				  this.recharge_id = 0
				  this.amount = e.detail.value
				} */
			},
			customRechargeFocus(e) {
				if (e.detail.value === '') {
					this.amount = 0
					return
				}
				this.recharge_id = 0
				this.amount = e.detail.value
			},
			changeType(pay_type) {
				this.pay_type = pay_type
			},
			changePanel(item) {
				this.recharge_id = item.id
				this.amount = item.amount
			},
			changeAgree() {
				this.agreeStatus = !this.agreeStatus
			},
			submit() {
				if (!this.agreeStatus) {
					this.show('请先同意用户协议')
					return
				}
				if (!this.recharge_id && this.amount <= 0) {
					return this.show('充值金额不能为0')
				}
				this.payStatus = true

				// 创建充值订单
				api.rechargeOrders
					.store({
						type: this.pay_type,
						id: this.recharge_id,
						amount: this.amount,
						market: 'wx',
					})
					.then((res) => {
						if (res.code === 200) {
							// 微信支付
							if (this.pay_type == 1) {
								console.log("微信支付")
								// uni.login({
								// 	provider: "weixin",
								// 	success: (loginRes) => {
								// 		console.log(loginRes)

								// 	}
								// })
								let pay_data = res.data.data
								console.log(pay_data, "pay_datapay_datapay_data")
								// #ifdef MP-WEIXIN
								uni.requestPayment({
									provider: 'wxpay',
									timeStamp: pay_data.timeStamp.toString(),
									nonceStr: pay_data.nonceStr,
									signType: 'MD5',
									package: pay_data.package,
									paySign: pay_data.paySign,
									success: (res) => {
										console.log(res)
										this.show('充值成功')
										this.payStatus = false
										setTimeout(() => {
											this.getUser()
										}, 500)
									},
									fail: (err) => {
										console.log(err)
										this.payStatus = false
									},
								})
								// #endif

								// #ifdef APP-PLUS

								uni.requestPayment({
									provider: 'wxpay',
									orderInfo: {
										appid: pay_data.appid, // 微信开放平台 - 应用 - AppId，注意和微信小程序、公众号 AppId 可能不一致
										noncestr: pay_data.noncestr, // 随机字符串
										package: pay_data.package, // 固定值
										partnerid: pay_data.partnerid, // 微信支付商户号
										prepayid: pay_data.prepayid, // 统一下单订单号
										timestamp: pay_data.timestamp, // 时间戳（单位：秒）
										sign: pay_data.sign, // 签名，这里用的 MD5/RSA 签名
									},
									success: (res) => {
										this.show('充值成功')
										this.payStatus = false
										setTimeout(() => {
											this.getUser()
										}, 500)
									},
									fail: (error) => {
										console.log(error)
										this.payStatus = false
									},
								})
								// #endif
							} else if (this.pay_type == 2) {
								let pay_data = res.data.data
								uni.requestPayment({
									provider: 'alipay',
									orderInfo: pay_data,
									success: (res) => {
										console.log(res,"resresres")
										this.show('充值成功')
										this.payStatus = false
										setTimeout(() => {
											this.getUser()
										}, 500)
									},
									fail: (error) => {
										console.log(error,"ererererere")
										this.payStatus = false
									},
								})
							}
						} else {
							this.payStatus = false
						}
					})
					.catch((error) => {
						this.payStatus = false
						console.log(error, "12312312")
					})
			},
			getPanels() {
				uni.showLoading({
					title: '数据加载中',
				})
				api.rechargePanels
					.index()
					.then((res) => {
						uni.hideLoading()
						if (res.code === 200) {
							this.rechargeData = res.data
							if (this.amount === 0) {
								this.amount = this.rechargeData[0].amount
								this.recharge_id = this.rechargeData[0].id
							}

							this.payStatus = false
						}
					})
					.catch((error) => {
						console.log(error)
					})
			},
			getUser() {
				api.users
					.show()
					.then((res) => {
						if (res.code === 200) {
							this.balance = res.data.balance
						}
					})
					.catch((error) => {
						console.log(error)
					})
			}
		},
	}
</script>

<style lang="scss" scoped>
	.recharge-layout {
		height: 100vh;
		background: url("https://www.dingxians.cn/upload/images/common/bg.png") 100%/100%;
	}

	.content {
		height: 100%;
		// background: linear-gradient(to bottom, #D5C7FA, #E2ECF5);

		.recharge-content ::v-deep .my-content {
			height: fit-content;
		}

		.header-mask {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
		}

		.header {
			box-sizing: border-box;
			width: 690rpx;
			height: 200rpx;
			background: url("https://www.dingxians.cn/upload/images/user/bg-recharge-header.png") 100%/100%;
			/* background: linear-gradient(to bottom, #d5c7fa, #e2ecf5); */
			display: flex;
			flex-direction: column;
			// color:#fff;
			justify-content: center;
			font-size: 30rpx;
			padding-left: 65rpx;
			position: relative;
			margin: 30rpx auto;

			.header_amount {
				font-weight: bold;
				font-size: 64rpx;
				margin-top: 20rpx;
				color: #f69738;
			}

			.header_title {
				color: #808080;
				font-size: 28rpx;
			}

			.golds {
				position: absolute;
				right: 40rpx;
				bottom: -70rpx;
				width: 262rpx;
				height: 207rpx;
			}
		}

		.recharge_box {
			display: flex;
			flex-direction: column;

			.recharge_header {
				display: flex;
				height: 100rpx;
				line-height: 100rpx;
				margin: 0 52rpx;

				.recharge_header_title {
					color: white;
					font-size: 28rpx;
					font-weight: bold;
				}

				.recharge_header_remark {
					font-size: 24rpx;
					color: #808080;
					margin-left: 12rpx;
				}
			}

			.recharge-custom {
				display: flex;
				color: white;
				align-items: center;
				margin: 0 52rpx 20rpx;
				padding: 0 20rpx;
				border-radius: 10rpx;

				.recharge-custom-num {
					margin-left: 20rpx;
					color: white;
					background-color: #505050;
					padding: 20rpx;
					border-radius: 10rpx;
				}

				&.item-bg .recharge-custom-num {
					background-color: transparent;
				}

				&.active {
					border: 2rpx solid #ded000;
				}
			}

			.recharge_panel {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				// margin: 0 auto;
				// width: 690rpx;
				padding: 0 52rpx;

				.recharge_item {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					height: 144rpx;
					width: 200rpx;
					border-radius: 10rpx;
					margin-bottom: 30rpx;
					background-image: url('https://www.dingxians.cn/upload/images/user/bg-recharge-item.png');
					background-size: 100% 100%;

					&.active {
						background-image: url('https://www.dingxians.cn/upload/images/user/bg-recharge-item-active.png');
					}

					.recharge_item_top {
						display: flex;
						align-items: center;

						.recharge_icon {
							width: 40rpx;
							height: 40rpx;
							margin-right: 10rpx;
						}

						.recharge-num {
							color: white;
							font-size: 36rpx;
							font-weight: bold;
						}
					}

					.recharge_item_bottom {
						display: flex;
						align-items: baseline;
						margin-top: 10rpx;
						color: #a0a0a0;

						.recharge_symbol {
							font-size: 24rpx;
						}

						.recharge_amount {
							font-size: 28rpx;
						}
					}
				}
			}
		}

		.recharge_type {
			display: flex;
			flex-direction: column;

			.recharge_type_item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 80rpx;
				border-radius: 10rpx;
				color: white;
				font-size: 28rpx;

				.pay_left {
					display: flex;
					align-items: center;
					margin-left: 52rpx;

					.pay_icon {
						width: 50rpx;
						height: 50rpx;
						margin-right: 20rpx;
					}
				}

				.pay_selected {
					width: 40rpx;
					height: 40rpx;
					margin-right: 52rpx;
				}
			}
		}

		.bottom {
			display: flex;
			flex-direction: column;
			position: fixed;
			left: 0;
			bottom: 0;
			width: 100%;
			padding: 30rpx 0;
			color: white;

			.bottom_header {
				display: flex;
				align-items: center;
				justify-content: center;

				.bottom_selected {
					width: 30rpx;
					height: 30rpx;
					margin: 0 10rpx 0 30rpx;
				}

				.bottom_header_agree {
					font-size: 24rpx;
					display: flex;
					align-items: center;

					.user_agree {
						color: #ee5093;
					}
				}
			}

			.bottom_pay_box {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 20rpx 30rpx 10rpx 30rpx;

				.bottom_amount {
					display: flex;
					align-items: baseline;
					font-size: 24rpx;

					.amount {
						color: #ee5093;
						font-size: 32rpx;
						font-weight: bold;
					}
				}

				.pay_submit {
					background-size: 100% 100%;
					height: 84rpx;
					line-height: 84rpx;
					text-align: center;
					width: 228rpx;
					color: #fff;
					font-size: 30rpx;

					&.ing {
						filter: grayscale(1);
						/* background-color: #ccc; */
					}
				}
			}
		}
	}
</style>